<template>
    <div class="feature_slide_container_template">
        <div class="tip" v-show="!isShow">

            <el-dialog
                    title="Check out our new risk assessment tools!"
                    custom-class="tipDialog"
                    top="10vh"
                    :visible.sync="dialogVisible"
                    width="80%">
                <div>
                    <el-carousel indicator-position="outside" height="450px">
                        <el-carousel-item v-for="item, index in slideDataList" :key="index">
                            <div style="text-align: center">
                                <img :src="item.image" width="auto" height="410px"/>
                                <h3 style="margin: 6px 6px;text-align: center">{{ item.title }}</h3>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-dialog>


        </div>


    </div>
</template>

<script>
    import {mapState, mapGetters, mapActions} from 'vuex'
    import {apiQueryPeakByCID} from "@/api/peak";
    import {apiQueryUserPeakByCID} from "@/api/user_peak";
    import {queryCampaignInfoByID} from "@/api/campaign";
    import {saveBookmark} from "@/api/bookmark";
    import {saveUserLog} from "@/api/log";

    import {getVersion, getTip, setTip} from '@/utils/auth'

    export default {
        data() {
            return {
                campaignId: "",
                activeName: "Fundraising Progress",
                versionControl: [],
                isShow: false,
                dialogVisible: false,
                slideDataList: [{
                    image: "/static/img/features/overall.png",
                    title: "Overall"
                }],
                allDataList: [
                    {
                        image: "/static/img/features/feature1.png",
                        title: "Fundraising Progress"
                    },
                    {
                        image: "/static/img/features/feature2.png",
                        title: "Goal Structure"
                    },
                    {
                        image: "/static/img/features/feature3.png",
                        title: "Fraudulency"
                    },
                    {
                        image: "/static/img/features/feature4.png",
                        title: "Commenting Trend"
                    },
                    {
                        image: "/static/img/features/feature5.png",
                        title: "Interaction"
                    },
                    {
                        image: "/static/img/features/feature6.png",
                        title: "Updating Trend"
                    },
                    {
                        image: "/static/img/features/feature7.png",
                        title: "Historical Outcomes"
                    },
                    {
                        image: "/static/img/features/feature8.png",
                        title: "Historical Communication"
                    },
                    {
                        image: "/static/img/features/feature9.png",
                        title: "Industry Trends"
                    }
                ]
            };
        },

        components: {},

        computed: {
            ...mapState({
                userId: state => state.user.userId,
                userName: state => state.user.name,
            }),
            ...mapGetters([
                'userLoginStatus',
            ]),
            version() {
                return getVersion()
            },
        },

        watch: {
            version(val) {
                console.log(val, "999999")
                if (val) {
                    console.log("user login success")
                    this.loadTip()
                }
            }
        },

        methods: {
            loadTip() {
                var that = this
                console.log("判断version")

                if (getVersion()) {
                    this.showTip()
                } else {
                    window.globalTimer = function () {
                        this.showTip()
                    }.bind(this)
                    setInterval(window.globalTimer, 1000)
                }


            },
            showTip() {
                console.log("do something")
                var that = this
                console.log(getTip())

                if (getTip()) {
                    return
                }

                if (getVersion()) {
                    that.versionControl = window.versionMap[getVersion()]
                    that.allDataList.forEach((item, i) => {
                        if (that.versionControl[i]) {
                            that.slideDataList.push(item)
                        }
                    })

                    that.dialogVisible = true

                    setTip(new Date().getTime())
                    clearInterval(window.globalTimer);
                }


            },
            clickFeatureShow() {
                this.isShow = !this.isShow
                var tip2 = {
                    operation: "Explore_tools",
                    params: JSON.stringify({
                        "user": this.userName,
                        "time": new Date().getTime(),
                        "campaignId": this.campaignId
                    })

                }
                saveUserLog(tip2);

            },
            handleClick(tab, event) {
                console.log(tab, event);

                var tip2 = {
                    operation: "Check_tool",
                    params: JSON.stringify({
                        "user": this.userName,
                        "time": new Date().getTime(),
                        "feature": tab.name,
                        "campaignId": this.campaignId
                    })

                }
                saveUserLog(tip2);

            },
            getUserNameById(userId) {
                var that = this;

                userId = userId || "";
                if ("" == userId) {
                    that.userName = "Anonymity";
                    return;
                }

                var that = this;
                this.$store
                    .dispatch("getUserName", userId)
                    .then(res => {
                        that.userName = res.userName;
                    })
                    .catch(err => {
                    });
            },
            initLoad() {
                var that = this;
            }
        },
        filters: {
            dateFormat(time) {
                return moment(time)
                    .startOf("mimute")
                    .fromNow();
            }
        },
        mounted() {
            /*console.log("绑定")
                    window.onYouTubeIframeAPIReady = function() {
                        console.log("onYouTubeIframeAPIReady")
                        alert("dd")
                    }
                    console.log("绑定")*/

            this.loadTip()


        },
        /*watch: {
            loadStatus(newValue, oldValue) {
                var that = this;
                if (true == newValue) {
                    setTimeout(function () {
                        that.initLoad();
                    }, 2000);
                }
            }
        }*/
    };
</script>

<style lang="scss">
    @import "../../style/mixin";

    .feature_slide_container_template {
        position: absolute;
        padding: 20px;
        width: 100%;
        min-height: 400px;
        .tip {
            margin-top: 200px;
            .showButton {
                font-size: 22px;
                span {
                    color: #011466;
                }
            }
            .tipDialog {
                min-height: 500px;
                font-weight: bold;
                .el-dialog__title {
                    font-weight: bold;
                }
            }
        }
    }
</style>